<template>
    <view class="pub_page pub_mine_bind pub_header_padding">
        <pub-head headerName="mine_info" :headerConfig="headerConfig"></pub-head>
        <div class="pub_page_scroll page_box">
            <div v-for="(li,key) in familyList" :key="key">
                <div class="title">亲情号{{ allowBind?'':key+1 }}</div>
                <div class="info_div">
                    <div class="pub_inputs">
                        <div class="abox">
                            <div class="ali ali_align_right">
                                <div class="atitle">姓名</div>
                                <input class="ainput" type="text" :value="li.name" disabled>
                            </div>
                            <div class="ali ali_align_right">
                                <div class="atitle">联系电话</div>
                                <input class="ainput" type="text" :value="li.mobile" disabled>
                            </div>
                            <div class="ali ali_align_right">
                                <div class="atitle">与本人关系</div>
                                <input class="ainput" type="text" :value="li.filiation" disabled>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <br>
            </div>
            <div v-if="!allowBind && familyList.length === 0" class="pub_nodata_1">空空如也～～</div>
            <div v-if="allowBind && familyList.length === 0">
                <div class="title">亲情号信息</div>
                <div class="info_div">
                    <div class="pub_inputs">
                        <div class="abox">
                            <!-- <div class="ali ali_align_right">
                                <div class="atitle">姓名</div>
                                <input class="ainput" type="text" v-model="familyInfo.name" maxlength="10" placeholder="请输入">
                            </div> -->
                            <div class="ali ali_align_right">
                                <div class="atitle">联系电话</div>
                                <input class="ainput" type="text" v-model="familyInfo.mobile" maxlength="11"
                                    placeholder="请输入">
                            </div>
                            <div class="ali ali_align_right">
                                <div class="atitle">与本人关系</div>
                                <picker class="apicker" @change="bindPickerChange" :value="relation==0?0:(relation-1)"
                                    :range="relationOption">
                                    <input type="text" :value="relationOption[relation-1]">
                                    <text class="icon-font-basic icon-b-arrow-1-2"></text>
                                </picker>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="pub_btn" @click="toBind">确定绑定</div>
            </div>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            pagescrollTop: 0,
            headerConfig: {
                title: '亲情号绑定',//标题栏内容
                left_type: 3,
                header_color: '#fff',
                title_color: '#000',
                left_content: 'dark',
            },

            userInfo: '',

            familyList: [],

            familyInfo: {
                "mobile": "",
                // "name": ""
            },

            relation: 0,

            relationOption: ['父子', '母子', '父女', '母女', '祖孙', '其他'],
        };
    },
    computed: {
        // 年龄小于50=可以绑定，大于等于50=只能被绑定
        allowBind() {
            return this.userInfo?.age < 50;
        }
    },
    onLoad() {
        this.getUserInfo({ needReloadUserInfo: false });

        this.getFamilyList()
    },
    methods: {
        bindPickerChange(e) {
            this.relation = e.detail.value + 1;
        },
        async getFamilyList() {
            this.$comFun.openLoading();
            const url = !this.allowBind ? 'user/getFamilyNumberList' : 'user/getBindFamilyNumberList';
            const res = await this.$request.get(url, {});
            // console.log(res);
            this.$comFun.closeLoading();
            if (res.code == 200) {
                this.familyList = res.result;
            }
        },
        async toBind() {
            // if (!this.familyInfo.name.trim()) {
            //     this.$comFun.toast('姓名不能为空');
            //     return;
            // }
            if (!this.$comFun.ValidateMobile(this.familyInfo.mobile)) {
                this.$comFun.toast('请输入正确的手机号');
                return;
            }
            if (!this.relation) {
                this.$comFun.toast('请选择与本人关系');
                return;
            }
            this.$comFun.openLoading();
            const res = await this.$request.post('user/bindFamilyNumber', {
                ...this.familyInfo,
                filiation: this.relationOption[this.relation]
            });
            // console.log(res);
            this.$comFun.closeLoading();
            if (res.code == 200) {
                this.$comFun.toast('绑定成功');
                this.relation = 0
                this.familyInfo = this.$options.data().familyInfo;
                this.getFamilyList()
            } else {
                this.$comFun.toast(res.message);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/mine.scss";
</style>
